<template>
  <div v-show="hideView" class="page">
    <div class="flex-content">
      <header>
        <div class="shop">
          <router-link to="/shop/shopDetail" class="shop-details">
            <!-- ../../../static/images/fenxiang.png -->
            <img :src="shopDetailData.image_path" alt="" class="shop-img" />
            <div class="shop-introduction">
              <h1 class="ellipsis">{{ shopDetailData.name }}</h1>
              <p class="ellipsis">
                <span>商家配送/</span>
                <span>分钟送达/</span>
                <span>配送费￥{{ shopDetailData.float_delivery_fee }}</span>
              </p>
              <p>{{ shopDetailData.promotion_info }}</p>
            </div>
          </router-link>
          <span class="iconfont icon-xiangyou1 icon-shop-detail"></span>
        </div>
        <router-link
          :to="{ path: '/shop' }"
          class="welfare"
          v-if="shopActivities && shopActivities.length > 0"
        >
          <p class="welfare-list">
            <i>{{ shopActivities[0]["icon_name"] }}</i>
            <span>{{ shopActivities[0]["description"] }}</span>
            <span>（APP 专项）</span>
          </p>
          <span class="activity">{{ shopActivities.length }}个活动</span>
          <span class="iconfont icon-xiangyou1 icon-activity"></span>
        </router-link>

        <span class="iconfont icon-xiangzuo-copy goback"></span>
      </header>
      <Tabs
        :tabsList="tabsList"
        @getIndex="getIndex"
        :isHasBottomBorder="hasBottomBorder"
      >
      </Tabs>
    </div>
    <div class="outer-content" v-show="activityIndex == 0">
      <Merchants
        :shopId="shopId"
        @addCartList="addCartList"
        :foodNum="foodNum"
      ></Merchants>
      <div class="footer">
        <div class="footer-cart">
          <div class="footer-left">
            <p class="cart-sum-price">￥{{ foodsTotalPrice }}</p>
            <p class="cart-instructions">配送费￥5</p>
          </div>
          <div
            class="footer-right"
            :class="{
              'footer-right': true,
              'footer-right-activity': !showCartLogo,
            }"
          >
            <span class="cart-pay" v-if="currentTotal <= 0">去结算</span>
            <span class="cart-pay" v-else>还差￥{{ currentTotal }}配送</span>
          </div>
          <!-- cart-logo-activity -->
          <div
            :class="{
              'cart-icon-sum': true,
              'cart-logo-activity': showCartLogo,
            }"
            @click="showCartList"
          >
            <p class="cart-logo iconfont icon-gouwuche"></p>

            <span class="shop-sum iconfont" v-show="showCartLogo">{{
              foodTotalSum
            }}</span>
          </div>
        </div>
        <div class="food-cart" v-if="showCart">
          <div class="header-cart">
            <span>购物车</span>
            <div class="clear-cart">
              <span class="clear-name" @click="clearCart"
                ><i class="clear-icon iconfont icon-shanchu1"></i>清空</span
              >
            </div>
          </div>
          <ul class="cart-list">
            <li class="cart-list-item" v-for="value in cartList">
              <div class="left-name">
                <span class="food-name">{{ value.name }}</span>
                <span>{{ value.pinyin_name }}</span>
              </div>
              <div class="right-price-num">
                <span class="food-price"><i>￥</i>{{ value.price }}</span>
                <span
                  class="update-num iconfont icon-jianhao"
                  @click="updateFoodNum('update', value)"
                ></span>
                <span class="food-num">{{ value.num }}</span>
                <span
                  class="add-num iconfont icon-jiahao"
                  @click="updateFoodNum('add', value)"
                ></span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 评价 -->
    <div class="evaluation" v-show="activityIndex == 1">
      <div class="evaluation-header">
        <div class="evaluation-comprehensive">
          <p class="ec-p1">4.3</p>
          <p class="ec-p2">综合评价</p>
          <p class="ec-p3">高于周边商家76.9</p>
        </div>
        <div class="comprehensive-score">
          <p>
            <span class="cs-common">服务态度</span>
            <el-rate
              v-model="value"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
            >
            </el-rate>
          </p>
          <p>
            <span class="cs-common">菜品评价</span>
            <el-rate
              v-model="value"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
            >
            </el-rate>
          </p>
          <p>
            <span class="cs-common">送达时间</span
            ><span class="cs3-time">分钟</span>
          </p>
        </div>
      </div>
      <div class="elaluation-list">
        <ul class="elaluation-outer">
          <li
            :class="{
              'e-category-name': true,
              'current-activity-cate': activityCate == index,
              'unsatisfied-cate': value.unsatisfied,
            }"
            v-for="(value, index) in commentsTags"
            @click="activityCate = index"
          >
            {{ `${value.name}(${value.count})` }}
          </li>
        </ul>
      </div>
      <div class="elaluation-rating-list">
        <ul>
          <li class="rating-item" v-for="item in ratingList">
            <img
              src="../../../static/images/qq.png"
              alt=""
              class="e-user-img"
            />
            <div class="e-user-data">
              <p class="eu-header">
                <span class="e-user-name">{{ item.username }}</span
                ><span class="e-user-time">{{ item.rated_at }}</span>
              </p>
              <p>
                <el-rate v-model="item.rating_star" disabled text-color="#f60">
                </el-rate>
                <span class="e-user-describe">{{ item.rating_text }}</span>
              </p>
              <p class="e-user-foodimg">
                <!-- <img :src="imgSrc.im" alt="" v-for="imgSrc in item.item_ratings" /> -->
                <img src="../../../static/images/qq.png" alt="" />
              </p>
              <ul class="e-user-foodnames clear">
                <li class="ellipsis" v-for="foodItem in item.item_ratings">
                  {{ foodItem.food_name }}
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
// import tabs from "Compontens/common/tabs.vue"
import { mapState } from "vuex";
import {
  shopDetails,
  foodMenu,
  ratingTags,
  getRatingList,
  ratingScores,
} from "@/service/getData";
import Tabs from "Components/common/tabs.vue";
import Merchants from "./children/merchants.vue";
import { imgBaseUrl } from "@/config/env";

export default {
  data() {
    return {
      // tabs 切换数据
      tabsList: [
        {
          id: 0,
          value: "商品",
        },
        {
          id: 1,
          value: "评价",
        },
      ],
      value: 4.2,
      shopDetailData: {}, // 商家信息
      shopActivities: "", //商家活动
      activityIndex: 0, // 默认活动组件
      shopId: "",
      hideView: false, //异步数据获取之前不显示
      cartList: [],
      showCartLogo: false, // 显示购物车logo
      showCart: false,
      foodNum: {
        food_id: null,
        num: 0,
      },
      hasBottomBorder: true, // Tabs标签是否加入底部细线
      commentsTags: [], // 商铺评论分类
      activityCate: 0, // 当前活动分类名
      ratingList: [], //  商铺评论列表
    };
  },

  watch: {
    cartList(newValue, oldValue) {
      if (newValue.length > 0) {
        this.showCartLogo = true;
        console.log(this.showCartLogo);
      } else {
        this.showCartLogo = false;
        this.showCart = false;
      }
    },
  },
  components: { Tabs, Merchants },
  computed: {
    ...mapState(["latitude", "longitude"]),
    foodTotalSum() {
      return this.cartList.reduce((preValue, currentValue) => {
        return preValue + Number(currentValue.num);
      }, 0);
    },
    foodsTotalPrice() {
      return this.cartList.reduce((preValue, currentValue) => {
        return preValue + Number(currentValue.price) * Number(currentValue.num);
      }, 0);
    },
    currentTotal() {
      return (
        Number(this.shopDetailData.float_minimum_order_amount) -
        this.foodsTotalPrice
      );
    },
  },
  created() {
    this.shopId = this.$route.query.id;
    this.initData();
  },
  mounted() {},
  methods: {
    async initData() {
      //获取商铺信息
      let shopDetailData = await shopDetails(
        this.shopId,
        this.latitude,
        this.longitude
      );
      shopDetailData = { ...shopDetailData };
      shopDetailData.image_path = `/api${imgBaseUrl}${shopDetailData.image_path}`;
      this.shopDetailData = shopDetailData;
      this.shopActivities = shopDetailData.activities;
      this.hideView = true;
      //获取商铺评论分类
      let commentsTags = await ratingTags(this.shopId);
      this.commentsTags = commentsTags;
      let ratingList = await getRatingList(this.shopId, this.ratingOffset);
      this.ratingList = ratingList;
      console.log(this.commentsTags, ratingList);
    },
    getIndex(index) {
      console.log(index);
      this.activityIndex = index;
    },
    addCartList(cartList) {
      let { food_id, num } = cartList;
      let foodIndex;
      let food = this.cartList.find((value, index) => {
        if (value["food_id"] == food_id) {
          foodIndex = index;
          return true;
        }
        return false;
      });
      if (food) {
        if (num < 1) {
          this.cartList.splice(foodIndex, 1);
        } else {
          food.num = num;
        }
      } else {
        this.cartList.push(cartList);
      }

      console.log(this.cartList);
    },
    showCartList() {
      if (this.showCartLogo) {
        this.showCart = !this.showCart;
      }
    },
    updateFoodNum(status, food) {
      let num;
      if (status == "update") {
        num = --food.num;
        if (num < 1) {
          let index = this.cartList.findIndex((value) => {
            return value["food_id"] == food["food_id"];
          });
          this.cartList.splice(index, 1);
        }
      } else {
        num = ++food.num;
      }
      this.foodNum = food;
    },
    clearCart() {
      let cartList = [];
      this.cartList.forEach((value) => {
        let cateItem = cartList.find((cate) => {
          return cate["category_id"] == value["category_id"];
        });
        if (cateItem) {
          let foodItem = cateItem.foods.find((food) => {
            return food["item_id"] == value["item_id"];
          });
          if (foodItem) {
            foodItem.specfoods.push({ food_id: value.food_id });
          } else {
            cateItem.foods.push({
              item_id: value["item_id"],
              specfoods: [{ food_id: value["food_id"] }],
            });
          }
        } else {
          cartList.push({
            category_id: value["category_id"],
            foods: [
              {
                item_id: value["item_id"],
                specfoods: [{ food_id: value["food_id"] }],
              },
            ],
          });
        }
      });
      console.log(cartList);
      this.cartList = [];
      this.$Bus.$emit("clearCart", cartList);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";
.page {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
header {
  width: 100%;
  position: relative;
  background: rgba(119, 103, 137, 0.43);
  .shop {
    padding: 0.3rem;
    .shop-details {
      display: flex;

      .shop-img {
        @include wh(2.9rem, 2.9rem);

        vertical-align: middle;
      }
      .shop-introduction {
        flex: 1;
        min-width: 8rem;
        margin-left: 0.3rem;

        h1 {
          min-width: 6rem;
          font-weight: bold;
          @include sc(0.8rem, #fff);
          margin-top: 0.2rem;
        }
        p {
          margin-top: 0.2rem;
          // text-overflow: ellipsis;
          // overflow: hidden;
          // white-space: nowrap;
          min-width: 6rem;
          @include sc(0.5rem, #fff);
          span {
            @include sc(0.5rem, #fff);
          }
        }
      }
    }
    .icon-shop-detail {
      @include sc(0.65rem, #fff);
      @include ct;
      right: 0.3rem;
    }
  }
  .goback {
    @include sc(0.65rem, #fff);
    transform: scale(1.2);
    font-weight: 500;
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
  }
  .welfare {
    @include fj;
    display: flex;
    position: relative;
    padding: 0.2rem 0.3rem;

    .welfare-list {
      @include sc(0.5rem, #fff);
      // height: 0.5rem;
      i {
        @include sc(0.5rem, #fff);
        border: 0.025rem solid rgb(240, 115, 115);
        padding: 0.01rem 0.05rem;
        background-color: rgb(240, 115, 115);
        border-radius: 0.2rem;
      }
      span {
        @include sc(0.5rem, #fff);
      }
    }
    .activity {
      @include sc(0.5rem, #fff);
      margin-right: 0.7rem;
    }
    .icon-activity {
      @include ct;
      right: 0.3rem;
      color: #fff;
    }
  }
}
.outer-content {
  display: flex;
  flex: auto;
  overflow: hidden;
  padding-bottom: 2rem;
  position: relative;

  // 购物车
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.2rem;
  .footer-cart {
    @include fj;
    position: relative;
    z-index: 1000;
    height: 2.2rem;
    .footer-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: #333;
      padding-left: 3rem;
      flex: 3;
      p {
        @include sc(0.4rem, #fff);
      }
      .cart-sum-price {
        font-size: 0.8rem;
        font-weight: bold;
      }
    }

    .footer-right {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 2;
      background-color: #4cd964;
      .cart-pay {
        @include sc(0.7rem, #fff);
        font-weight: bold;
      }
    }
    .footer-right-activity {
      background-color: #333;
    }
    .cart-icon-sum {
      position: absolute;
      top: -0.8rem;
      left: 0.2rem;
      border: 4px solid #444;
      border-radius: 50%;
      background: #3d3d3f;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 2.6rem;
      height: 2.6rem;

      .cart-logo {
        color: #fff;
        font-size: 1.8rem;
      }
      .shop-sum {
        position: absolute;
        left: 100%;
        top: 0;
        transform: translate(-50%, -25%);
        display: flex;
        justify-content: center;
        align-items: center;
        @include wh(0.7rem, 0.7rem);

        border: 1px solid red;
        border-radius: 50%;
        background: red;
        color: #fff;
        font-size: 0.5rem;
      }
    }
    .cart-logo-activity {
      background: $blue;
      .cart-logo {
        color: #fff;
      }
    }
  }
}
.food-cart {
  width: 100%;
  position: absolute;
  bottom: 100%;
  left: 0;
  .header-cart {
    @include fj;
    align-items: center;
    background: #eceff1;
    padding: 0.3rem 0.6rem;
    span {
      @include sc(0.7rem, #666);
    }
    .clear-cart {
      display: flex;
      align-items: center;
      .clear-name {
        @include sc(0.6rem, #666);
      }
      .clear-icon {
        @include sc(0.6rem, #666);
      }
    }
  }
  .cart-list {
    .cart-list-item {
      @include fj;
      padding: 0.6rem 0.5rem;
      background: #fff;
      .left-name {
        display: flex;
        flex-direction: column;
        justify-content: center;
        span {
          @include sc(0.4rem, black);
        }
        .food-name {
          @include sc(0.7rem, #666);
        }
      }
      .right-price-num {
        display: flex;
        align-items: center;
        span {
          margin-left: 0.3rem;
        }
        .food-price {
          @include sc(0.7rem, #f60);
          i {
            @include sc(0.6rem, #f60);
            font-weight: 600;
          }
        }
        .update-num {
          display: flex;
          @include wh(0.7rem, 0.7rem);
          justify-content: center;
          align-items: center;
          border: 1px solid $blue;
          border-radius: 50%;
          @include sc(0.6rem, $blue);
        }
        .food-num {
          @include sc(0.6rem, #666);
        }
        .add-num {
          @extend .update-num;
          color: #fff;
          background: $blue;
        }
      }
    }
  }
}
.evaluation {
  overflow: hidden;
  overflow-y: auto;
}
.evaluation-header {
  display: flex;
  padding: 0.8rem 0.5rem;
  background: #fff;
  .evaluation-comprehensive {
    flex: 3;
    p {
      text-align: center;
    }
    .ec-p1 {
      @include sc(1.2rem, #f60);
    }
    .ec-p2 {
      @include sc(0.65rem, #666);
    }
    .ec-p3 {
      @include sc(0.4rem, #999);
    }
  }
  .comprehensive-score {
    flex: 4;
    p {
      font-size: 0.65rem;
    }
  }
}
.cs-common {
  @include sc(0.65rem, #666);
}
.cs3-time {
  margin-left: 0.3rem;
  @include sc(0.55rem, #999);
}
// 评论分类名
.elaluation-list {
  background: #fff;
  margin-top: 0.5rem;
}
.elaluation-outer {
  padding: 0.5rem;
}
.elaluation-outer::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
.e-category-name {
  float: left;
  padding: 0.3rem;
  margin-right: 0.3rem;
  margin-bottom: 0.3rem;
  @include sc(0.6rem, #6d7885);
  background: #ebf5ff;
  border: 1px;
  border-radius: 5px;
}
.current-activity-cate {
  background: #3190e8;
  color: #fff;
}
.unsatisfied-cate {
  background: #f5f5f5;
  color: #aaa;
}

.elaluation-rating-list {
  margin-top: 0.5rem;
  background: #fff;
}
.rating-item {
  display: flex;
  padding: 0.5rem;
}
.e-user-img {
  @include wh(1.5rem, 1.5rem);
  border: 1px;
  border-radius: 50%;
  margin-right: 0.3rem;
  // padding: 0.5rem;
}
.e-user-data {
  flex: auto;
  p {
    font-size: 0.6rem;
  }
}
.eu-header {
  @include fj;
  .e-user-name {
    @include sc(0.5rem, #666);
  }
  .e-user-time {
    @include sc(0.4rem, #999);
  }
}
.e-user-describe {
  @include sc(0.55rem, #666);
}
.e-user-foodimg {
  img {
    @include wh(3rem, 3rem);
    margin-right: 0.3rem;
  }
}
.e-user-foodnames {
  li {
    float: left;
    margin-right: 0.3rem;
    @include sc(0.55rem, #999);
    width: 2.2rem;
    padding: 0.2rem;
    border: 1px solid #ebebeb;
    border-radius: 5px;
  }
}
</style>
<style lang="scss" >
.el-rate {
  display: inline-block;
}
.el-rate__icon {
  font-size: 0.3rem;
  margin: 0;
}
.el-rate__text {
  font-size: 0.55rem;
  color: #f60 !important;
}
</style>